<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bx {
            margin: 0 auto;
        }

        .start {
            /* width: 1370px; */
            /* border: 1px solid blue; */
            margin: 100px auto;
        }

        .top {
            height: 50px;
            background: #f6f6f6;
            line-height: 50px !important;
        }

        .top_right {
            text-indent: 5em;
            line-height: 50px;
            float: left;
        }

        .top_left {
            margin-right: 100px;
            line-height: 50px;
            float: right;
        }

        .top_left img {
            vertical-align: middle;
        }

        .top_left span {
            /* display: block; */
            vertical-align: middle;
            text-align: center;
            line-height: 25px;
            border-right: solid 1px gray;
            padding-right: 10px;
            margin-right: 10px;
        }

        .top_left a {
            text-decoration: none;
            color: grey;
        }

        .top_last {
            float: right;
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            /* border: 1px solid black; */
            margin-right: 30px;
            color: #fff;
            background: rgb(16, 147, 199);
            border-radius: 10px;
            margin-top: 10px;
        }

        .top_last img {
            vertical-align: middle;
        }

        .logo {
            height: 55px;
            line-height: 50px;
        }

        .logo_left {
            float: left;
            width: 250px;
        }

        .logo span {
            font-size: 32px;
            color: #f0ad6e;
            font-family: "隶书";
            float: right;
        }

        .nav {
            height: 50px;
            background-color: #018ed6;
            text-align: center;
            line-height: 50px;
        }

        .nav ul {
            text-align: center;
            height: 50px;
        }

        .nav ul li {
            width: 90px;
            height: 50px;
            float: left;
            list-style: none;
            color: white;
       
        }
        .nav ul li:hover{
            background-color: #ff7201;
            color: rgb(32, 245, 3);
            
        }

        .w {
            width: 1700px !important;
            margin: 0 auto;
        }

        .bigpic {
            height: 500px;
            background-image: url(./image/onlinerjcs.png) !important;

            background-repeat: no-repeat;
            background-position: center top;
            overflow: hidden;
        }

        .study_apply {
            width: 400px;
            height: 400px;
            /* border: 1px solid whitesmoke; */
            color: whitesmoke;
            margin-top: 50px;
            margin-left: 50px;
            background-color: #11005d;
            overflow: hidden;
        }

        .study_apply p {
            text-align: center;
            font-size: x-large;
            margin-bottom: 30px;
            margin-top: 30px;
            font-weight: 800;
        }

        .study_apply .time {
            /* width: 0px; */
            height: 70px;
            /* border: 1px solid beige; */
            text-align: center;
            font-size: x-large;
            line-height: 70px;
        }

        .study_apply .time span {
            width: 50px;
            height: 50px;
            /* border: 1px solid beige; */
            background-color: red;
        }

        form {
            width: 400px;
            height: 100px;
            /* border: 1px solid black; */
            text-align: center;
        }

        form div {
            width: 350px;
            height: 60px;
            /* border: 1px solid whitesmoke; */
            margin-left: 10px;
        }

        input {
            width: 200px;
            height: 30px;
            border-radius: 10px;
        }

        form span {
            display: inline-block;
            width: 50px;
            height: 20px;
            /* border: 1px solid whitesmoke; */
            margin-right: 10px;
        }

        .receive {
            width: 300px;
            height: 50px;
            border: 1px solid beige;
            margin-top: 80px;
            margin-left: 40px;
            background-color: rgb(37, 177, 233);
            border-radius: 20px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        button {
            background-color: #25b1e9;
            border: none;
            cursor: pointer;
        }

        input {
            outline: none;
        }

        h1 {
            font-size: 40px;
            color: rgb(14, 13, 13);
            text-align: center;
            margin-top: 20px;
        }

        h1 span {
            color: red;
            font-size: 36px;
        }

        .subject_top>span {
            display: block;
            text-align: center;
            color: gray;
            margin-top: 10px;
        }

        .start .subject_footer {
            width: 1500px !important;
            height: 320px;
            /* border: 1px solid black; */
        }

        .subjtct_main ul {
            width: 220px;
            height: 330px;
            /* border: 1px solid black; */
            margin-left: 50px;
            float: left;
        }

        .subjtct_main ul li {
            list-style: none;
            width: 180px;
            height: 60px;
            border-bottom: 1px solid blue;
            /* margin-left: 100px; */
            line-height: 60px;
            text-align: center;
        }

        /* .subjtct_main ul li:first-child{
            background-color: #4ba1f1;
        } */
        .subjtct_main ul li:hover {
            background-color: cornflowerblue;
            cursor: pointer;
            color: white;
           
        }

        .subject_pic {
            opacity: 0;
            width: 800px;
            height: 300px;
            /* background-color: crimson; */
            border: 5px solid skyblue;
            float: left;
            margin-left: 100px;
        }.subjtct_main ul:hover + .subject_pic{
            opacity: 1 !important;
        }

        .subjtct_main .subject_pic span {
            width: 400px;
            height: 100px;
            /* border: black 1px solid; */
            display: block;
            float: right;
            margin: 20px;
        }

        .subjtct_main .goodness {
            width: 300px;
            height: 30px;
            /* border: 1px solid black; */
            color: white;
            background-color: #fa6500;
            line-height: 30px;
            text-align: center;
            margin-bottom: 10px;
        }

        .business {
            width: 1500px;
            height: 460px;
            /* border: 1px solid black; */
            text-align: center;
            background-color: #0d056c;
            color: white;
        }

        .business h1 {
            color: white;
            font-size: 40px;
            margin-top: 20px !important;
        }

        .business_salay {
            width: 1200px;
            height: 500px;
            /* border: cornsilk 1px solid; */
            margin-left: 300px;
        }

        .salary {
            width: 380px;
            height: 310px;
            border: 1px solid black;
            box-shadow: inset 0 0 20px 15px #2a169b;
            float: left;
        }

        .salary p {
            font-size: x-large;
            margin-top: 30px;
        }

        .salary p span {
            color: #49bfe5;
        }

        .salary>span {
            display: inline-block;
            font-size: small;
            margin-top: 10px;
        }

        .salary_show {
            width: 350px;
            height: 800px;
            /* border: ivory 1px solid; */
            margin-left: 100px;
        }

        .salary_show_floor {
            width: 400px;
            height: 500px;
            /* border: solid 1px bisque; */
            margin-left: -100px;
        }

        .salary_show_floor1 {
            width: 300px;
            height: 30px;
            /* border: solid 1px bisque; */
            margin-top: 10px;
            margin-left: 25px;
            float: left !important;
        }

        .salary_show_floor1_one {
            display: inline-block;
            height: 20px;
            width: 100px;
            background-color: blue;
            vertical-align: middle;
            float: left;
            margin-left: 10px;
        }

        .salary_show_floor1 span:first-child {
            float: left;
        }

        .salary_show_floor1 span:last-child {
            float: right;
        }

        .salary_show_floor2 .salary_show_floor1_one {
            width: 150px;
            background-color: #8a4de8;
        }

        .salary_show_floor1 .salary_show_floor3 {
            background-color: burlywood !important;
            width: 140px;
        }

        .salary_show_floor1 .salary_show_floor4 {
            background-color: cadetblue;
            width: 78px;
        }

        .salary_show_floor1 .salary_show_floor5 {
            background-color: rgb(18, 245, 75);
            width: 100px;
            margin-left: 3px;
        }

        .salary_show_floor1 {
            border-bottom: 1px solid rgb(45, 12, 233);
        }

        .business .business_show {
            width: 380px;
            height: 310px;
            /* border: 1px solid rgb(218, 201, 201); */
            box-shadow: inset 0 0 20px 15px #2a169b;
            float: right;
        }

        .business_show>p:first-child {
            font-size: 25px;
        }

        .business_show>p:last-child {
            font-size: 14px;
        }

        .business_pic {
            width: 360px;
            height: 210px;
            /* border: 1px solid bisque; */
            margin-top: 30px;
            margin-left: 30px;
        }

        .business_pic_top {
            width: 360px;
            height: 105px;
            /* border: 1px solid wheat; */
        }

        .business_pic_top img:first-child {
            float: left;

        }

        .business_pic_top img:last-child {
            float: right;
        }

        .business_pic_top span {
            float: left;
            margin-left: 30px;
        }

        .business_pic_top span:last-child {
            float: right;
            margin-right: 60px;
        }

        .class_pk {
            /* height: 900px; */
            text-align: center;
            margin-top: 30px;
        }

        .class_pk p {
            font-size: 30px;
            font-weight: 800;
        }

        .class_pk p span {
            color: red;
            display: inline-block;
            margin-right: 10px;
        }

        .class_pk>span {
            display: block;
            font-size: 13px;
            margin-top: 10px;
        }

        .class_pk_head {
            width: 1200px;
            height: 70px;
            /* border: 1px solid black; */
            margin: auto;
            margin-top: 50px;
        }

        .class_pk_head div {
            width: 260px;
            height: 70px;
            /* border: 1px solid black; */
            float: left;
            line-height: 70px;
            margin-right: 10px;
            font-weight: 800;
            font-size: 20px;
            background-color: #e4e4e4;
        }

        .class_pk_head .head_vs p {
            display: block;
            width: 240px;
            height: 50px;
            font-size: 150px;
            /* border: 1px solid black; */
            margin-top: -80px;
            color: #fa2838;
        }

        .class_top {
            width: 1200px;
            height: 270px;
            /* border: 1px solid black; */
            margin: auto;
            margin-top: 10px;
        }

        .class_top .Goodprogrammer h5 {
            color: white;
            line-height: 120px;
        }

        .Goodprogrammer span {
            display: block;
            line-height: 20px;
        }

        .class_top div {
            width: 260px;
            height: 270px;
            /* border: 1px solid black; */
            float: left;
            line-height: 70px;
            margin-right: 10px;
            font-weight: 800;
            font-size: 20px;
            background-color: #e4e4e4;
        }

        .class_top div p {
            width: 130px;
            height: 30px;
            /* border: 1px solid black; */
            font-size: 16px;
            line-height: 30px;
            margin: auto;
            margin-top: 20px;
            color: white;
            background-color: red;
            border-radius: 20px;
        }

        .class_top div span {
            display: block;
            width: 180px;
            height: 100px;
            font-weight: 500;
            font-size: 14px;
            margin: auto;
            line-height: 25px;
            text-align: left;
        }

        .class_top .Goodprogrammer span {
            height: 30px;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
        }

        .class_top .Goodprogrammer span:last-child {
            font-size: 25px;
            font-weight: 800;
        }

        .class_top .Goodprogrammer {
            width: 260px;
            height: 270px;
            /* border: 1px solid black; */
            float: left;
            line-height: 200px;
            margin-right: 10px;
            font-weight: 800;
            font-size: 20px;
            background-color: #da0000;
            color: white;
        }

        .class_middle {
            height: 200px;
        }

        .class_middle .Goodprogrammer {
            height: 200px;
            background-color: #6e6e6e;
        }

        .class_middle div {
            height: 200px;
        }

        .class_middle div p {
            background-color: #6d6d6d;
        }

        .class_middle_footer .Goodprogrammer p {
            line-height: 170px;
            font-size: 30px;
        }

        .teacher_introduce {
            height: 832px;
            background-color: #01003a;
            margin-top: 50px;
            color: white;
            text-align: center;
        }

        .teacher_introduce p {
            font-size: 50px;
            line-height: 80px;
        }

        .teacher_introduce p span {
            color: red;
        }

        .teacher_introduce>span {
            display: block;
        }

        .teacher_introduce .teacher_head_pic {
            width: 1200px;
            height: 100px;
            /* border: 1px solid white; */
            margin: auto;
            margin-top: 40px;
        }

        .teacher_introduce .teacher_head_pic ul li:first-child {
            background-color: #33e6f2;
        }

        .teacher_introduce .teacher_head_pic ul li {
            float: left;
            width: 100px;
            height: 100px;
            list-style: none;
            border-radius: 50%;
            /* border: 1px solid white; */
            margin-right: 50px;
            background-color: #082a58;
        }

        .teacher_introduce .teacher_head_pic ul li img {
            margin-top: 20px;
        }

        .teacher_introduce_show {
            margin-left: 300px;
            margin-top: 30px;
            width: 1000px;
            height: 530px;
            border: 3px solid #4d4899;
            background-color: #0c0467;
        }

        .full_body_picture {
            width: 300px;
            height: 500px;
            background: url(./image/全身照.png) no-repeat;
            float: left;
        }

        .Personal_introduction {
            width: 675px;
            height: 500px;
            border: 1px solid beige;
            float: right;
        }

        .Personal_introduction>span {
            font-size: 25px;
            float: left;
            margin-top: 30px;
        }

        .teacher_introduce_show .Personal_introduction .Personal_introduction_title {
            height: 30px;
            width: 230px;
            border: 1px solid #05a8f2;
            /* background-color: violet; */
            margin-top: 30px;
            margin-left: 80px;
            line-height: 30px;
            border-radius: 20px;
        }

        .Personal_introduction .Personal_introduction_title span:first-child {
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: #05a8f2;
            margin-top: 0px;
            line-height: 30px;
            border-radius: 20px;
            margin-left: -15px;
        }

        .teacher_introduce_show .Personal_introduction .Personal_introduction_subject {
            /* display: inline-block !important; */
            width: 530px;
            /* border: 1px solid white; */
            background-color: violet;
            margin-top: 30px;
            margin-left: 80px;
            line-height: 30px;
            border-radius: 20px;
            color: #0e78b4;
        }

        .teacher_introduce_show .Personal_introduction .Personal_introduction_subject span {
            width: 250px;
            height: 30px;
            float: left;
            border-radius: 20px;
            border: 2px solid #173687;
            font-size: 20px;
            margin-right: 10px;
        }

        .detailed_introduction {
            width: 570px;
            height: 180px;
            /* border: 1px solid beige; */
            margin-top: 70px !important;
            margin-left: 80px;
        }

        .detailed_introduction span {
            display: block;
            font-size: 17px !important;
            text-align: left !important;
        }

        .detailed_data_show {
            width: 520px;
            height: 70px;
            border: 1px solid wheat;
            margin-left: 80px;
            margin-top: 10px;
        }

        .detailed_data_show div {
            width: 125px;
            height: 70px;
            line-height: 70px;
            float: left;
            /* margin-top: -10px; */
            border-right: 1px solid skyblue;
        }

        .detailed_data_show div:last-child {
            border: none;
        }

        .detailed_data_show div i {
            font-size: 16px;
            display: block;
            margin-top: -50px;
            color: #18c2e6;
        }

        .Personal_introduction .student_evaluation {
            width: 502px;
            height: 90px;
            /* border: 1px solid white; */
            margin-left: 80px;
            margin-top: 5px;
        }

        .Personal_introduction .student_evaluation p {
            font-size: 18px;
            text-align: left;
            line-height: 25px;
        }

        .Personal_introduction .student_evaluation img {
            display: block;
            float: left;
        }

        .student_evaluation .h_student {
            width: 210px;
            height: 30px;
            /* border: 1px solid black; */
            margin-left: 30px;
        }

        .h_student i {
            display: inline-block;
            width: 100px;
            height: 30px;
            border: 2px solid #1f368b;
            color: skyblue;
            border-radius: 20px;
            line-height: 30px;
        }

        .student_evaluation>span {
            display: inline-block;
            margin-top: 5px;
            float: left;
            margin-left: 15px;
        }

        .more_class {
            width: 200px;
            height: 50px;
            background-color: #fc114b;
            float: right;
            line-height: 50px;
            margin-top: -40px;
            border-radius: 40px;
            font-size: 18px;
            font-weight: 800;
        }

        a {
            text-decoration: none;
            color: white;
        }

        .address {
            height: 415px;
            background-color: #276dc3;
            overflow: hidden;
        }

        /* .address  .address_auto{
            width: 1380px;
            height: 60px;
            border: rgb(209, 14, 14) 1px solid;
            margin: auto;
        } */
        .address .address_auto>ul {
            width: 1500px;
            height: 50px;
            margin: auto;
            margin-top: 30px;
        }

        .address .address_auto>ul li {
            width: 60px;
            height: 60px;
            float: left;
            list-style: none;
            line-height: 50px;
            text-align: center;
            color: white;
            font-size: 20px;
            margin-left: 20px;
        }

        .address .address_auto>ul li {
            position: relative;

        }

        .address .address_auto>ul li:hover {
            background-color: #ff7201;
        }

        .address .address_auto>ul :hover div {
            position: absolute;
            width: 0;
            height: 0;
            border-top: 20px solid #ff7201;
            border-right: 20px solid #1ed83700;
            border-left: 20px solid transparent;
            left: 10px;

        }

        .address_auto_detailed {
            float: left;
            width: 1500px;
            height: 500px;
            /* border: 1px solid beige; */
            margin-left: 130px;
        }
        .address_auto_detailed ul{height: 0;}
        .address_auto_detailed >ul li {
            list-style: none;
            width: 800px;
            height: 40px;
            line-height: 40px;
            color: white;
            /* border: 1px solid white; */
        }
        .address_auto_detailed   .address_auto_wecheat{
            width: 600px;
            height: 200px;
            /* border: 1px solid rgb(233, 17, 17); */
            /* background-color: violet; */
            float: right;
           
        }
        .address_auto_wecheat ul li{
            margin-top: 50px;
            width: 150px;
            height: 150px;
            float: left;
            margin-left: 30px;
            list-style: none;
            /* border: 1px solid black; */
            text-align: center;
            color: white;
            cursor: pointer;
        }
        .copyright{
            height: 50px;
            background-color: #143254;
           color: rgb(102, 98, 92);
           line-height: 50px;
           cursor: pointer;
        }
        .copyright ul{
            width: 800px;
            margin: auto;
        }
        .copyright ul li{
            float: left;
            width: 100px;
            list-style: none;
            height: 30px;
           margin-top: 10px;
            text-align: center;
          /* margin-left: 150px; */
           line-height: 30px;
           border-right: 1px solid white;
        }
        .copyright ul li:last-child{
            border-right:none
        }
        .copyright ul li:hover{
            color: white;
        }
    </style>
</head>

<body>
    <div class="start w">
        <!-- 最上面部分制作 -->
        <div class="top w">
            <div class="top_right">
                <span>千峰教育，有情怀，有责任心，有担当的IT职业教育机构</span>
            </div>

            <div class="top_last">
                <div class="wx">
                    <img src="./image/wx.png" alt="">
                    <span>官微</span>
                </div>
            </div>
            <div class="top_left">
                <img src="./image/call_ico.png" alt="">
                <span>400-811-9990</span>
                <span><a href="#">加入收藏</a></span>
            </div>
        </div>
        <!-- logo部分制作 -->
        <div class="logo w">
            <div class="logo_left">
                <a href="http://www.mobiletrain.org/?pinzhuanbdtg=biaoti">
                    <img src="./image/new_logo.png" alt="">
                </a>
            </div>
            <div class="logo_right">
                <span>
                    坚持面授品质，坚持良心教育
                </span>
            </div>
        </div>
        <!-- 导航栏制作 -->
        <div class="w">
            <div class="nav">
                <ul>
                    <a href="#">
                        <li>首页</li>
                    </a>
                    <a href="">
                        <li>课程培训</li>
                    </a>
                    <a href="">
                        <li>教学保障</li>
                    </a>
                    <a href="">
                        <li>视频教程</li>
                    </a>
                    <a href="">
                        <li>原创丛书</li>
                    </a>
                    <a href="">
                        <li>企业合作</li>
                    </a>
                    <a href="">
                        <li>认证考证</li>
                    </a>
                    <a href="">
                        <li>教研院</li>
                    </a>
                    <a href="">
                        <li>学员天地</li>
                    </a>
                    <a href="">
                        <li>关于千峰</li>
                    </a>
                </ul>
            </div>
        </div>
        <!-- 大背景图片位置制作 -->
        <div class="bigpic">
            <div class="study_apply">
                <p>14天免费学习限时申请</p>
                <div class="time">
                    <span>13</span>
                    <i>天</i>
                    <span>06</span>
                    <i>时</i>
                    <span>09</span>
                    <i>分</i>
                    <span>37</span>
                    <i>秒</i>
                </div>
                <form action="">
                    <div class="uname">
                        <span>姓名</span>
                        <input type="text" placeholder="请输入你的名字">
                    </div>
                    <div class="iphone">
                        <span>手机号</span>
                        <input type="text" placeholder="你的手机号">
                    </div>
                    <div class="qq">
                        <span>QQ号</span>
                        <input type="text" placeholder="你的QQ号">
                    </div>
                </form>
                <div class="receive">
                    <span><button>点击立即领取</button></span>
                </div>
            </div>
        </div>
        <!-- 学科分类部分制作 -->
        <div class="subject_top w">
            <h1>应用领域广阔!&nbsp;&nbsp;<span>大前端</span>引爆科技浪潮&nbsp; 孕育无限可能</h1>
            <span>5个大前端技术应用案例，直达用户，为应用而生!</span>
        </div>
        <div class="subject_footer w">
            <div class="subjtct_main w">
                <ul>
                    <li>微信小程序</li>
                    <li>人脸识别</li>
                    <li>大数据可视化</li>
                    <li>区块链</li>
                    <li>物联网</li>
                </ul>
                <div class="subject_pic">
                    <img src="./image/WeChat.png" alt="">
                    <span>据微信言方数据显示，目前小程序已经覆盖
                        了200多个细分行业，服务用户超过1000
                        亿人次，年交易增长超过600%，创造了
                        5000亿以上的行业价值。
                    </span>
                    <div class="goodness">
                        HTML5大前端技术优势:
                    </div>
                    小程序是基于微信平台的轻量级应用，微信小程序在微信平台中只需要开发前端版本，发布的开发者
                    工具也很方便，两天就能开发出一个完整的微信小程序.

                </div>
            </div>
        </div>
        <!-- 企业招聘展示部分制作 -->
        <div class="business w">
            <h1>企业重金揽才!HTML5高端人才<span>一将难求</span></h1>
            <p>HTML5开发人员需求量呈爆炸式增长，高端人才供需矛盾日益严峻，薪资直线攀升!</p>
            <div class="business_salay">
                <!-- 薪资水平百分比 -->
                <div class="salary">
                    <p>HTML5行业岗位均薪<span>18480元</span></p>
                    <span>岗位月均薪15k以上占比67.7%</span>
                    <div class="salary_show">
                        <div class="salary_show_floor">
                            <div class="salary_show_floor1">
                                <span>30-50k</span>
                                <div class="salary_show_floor1_one"></div><span>17.9%</span>
                            </div>
                            <div class="salary_show_floor1 salary_show_floor2">
                                <span>20-30k</span>
                                <div class="salary_show_floor1_one salary_show_floor2"></div><span>29.1%</span>
                            </div>
                            <div class="salary_show_floor1 salary_show_floor2">
                                <span>15-20k</span>
                                <div class="salary_show_floor1_one salary_show_floor3"></div><span>25%</span>
                            </div>
                            <div class="salary_show_floor1 salary_show_floor2">
                                <span>10-15k</span>
                                <div class="salary_show_floor1_one salary_show_floor4"></div><span>10.1%</span>
                            </div>
                            <div class="salary_show_floor1 salary_show_floor2">
                                <span>10k以下</span>
                                <div class="salary_show_floor1_one salary_show_floor5"></div><span>14.9%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 招聘公司一览 -->
                <div class="business_show">
                    <p>HTML5人才缺口高达<span>300W</span></p>
                    <p>上至BAT大厂下至初创公司，HTML5前端开发岗位需求激增</p>
                    <div class="business_pic">
                        <div class="business_pic_top"><img src="image/wuyou.png" alt="">
                            <img src="image/zhilian.png" alt=""><span>6345223/日</span><span>2566223/日</span>
                        </div>

                        <div class="business_pic_bottom business_pic_top">
                            <img src="image/liepin.png" alt="">

                            <img src="image/lagou.png" alt="">
                            <span>999654/日</span><span>23523523/日</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 课程同台PK制作 -->
        <div class="class_pk">
            <p>N版课程<span>同台PK</span>实战方见分晓</p>
            <span>好程序1 TMLS大解话16类企业现实战项目沙及16个出域
            </span>
            <div class="class_pk_head">
                <div class="head_vs">
                    <p>v<sub>s</sub></p>
                </div>
                <div>
                    项目领域
                </div>
                <div>
                    项目种类
                </div>
                <div>
                    项目级别
                </div>
            </div>
            <div class="class_top">
                <div class="Goodprogrammer">
                    <h5>好程序员</h5>
                    <span>HTML5大前端</span>
                    <span>好程序员</span>
                </div>
                <div>
                    <p>16个领域</p>
                    <span>电肉用.招聘美所的管理不机.
                        配周类.电刷资只风020平日
                        村交平台等电罚美招聘关所的管理系碗.
                    </span>
                </div>
                <div>
                    <p>16类项目</p>
                    <span> PCA修回间rtApn周内位
                        5S后酒分离开发杭后地
                        入开发，价EA号</span>
                </div>
                <div>
                    <p>中肉施项目
                    </p>
                    <span> 人地作.Cecll人员分工开
                        五IM 2818项日5布上
                        真土开岁环真及形里。自主理维店</span>
                </div>
            </div>
            <div class="class_top class_middle">
                <div class="Goodprogrammer">
                    <h5>HTML5大前端</h5>
                    <span>千峰就业班</span>
                </div>
                <div>
                    <p>16个领域</p>
                    <span>电肉用.招聘美所的管理不机.
                        配周类.电刷资只风020平日
                        村交平台等电罚美招聘关所的管理系碗.
                    </span>
                </div>
                <div>
                    <p>16类项目</p>
                    <span> PCA修回间rtApn周内位
                        5S后酒分离开发杭后地
                        入开发，价EA号</span>
                </div>
                <div>
                    <p>中肉施项目
                    </p>
                    <span> 人地作.Cecll人员分工开
                        五IM 2818项日5布上
                        真土开岁环真及形里。自主理维店</span>
                </div>
            </div>
            <div class="class_top class_middle class_middle_footer">
                <div class="Goodprogrammer">
                    <p>其他机构</p>
                </div>
                <div>
                    <p>10个领域</p>
                    <span>电肉用.招聘美所的管理不机.
                        配周类.电刷资只风020平日
                        村交平台等电罚美招聘关所的管理系碗.
                    </span>
                </div>
                <div>
                    <p>12类项目</p>
                    <span> PCA修回间rtApn周内位
                        5S后酒分离开发杭后地
                        入开发，价EA号</span>
                </div>
                <div>
                    <p>中肉施项目
                    </p>
                    <span> 人地作.Cecll人员分工开
                        五IM 2818项日5布上
                        真土开岁环真及形里。自主理维店</span>
                </div>
            </div>

        </div>
        <!-- 老师介绍面板制作 -->
        <div class="teacher_introduce">
            <p>全部<span>总监架构师级</span>讲师亲授&nbsp;&nbsp;&nbsp;&nbsp;用心成就每一位</p>
            <span>好程序员王炸学5王炸学6团甄选自千人教研团，讲师上岗需经历5个惟度筛选，6轮培训提升
            </span>
            <span>
                百度、新流.中科院等名企大和深度参5教学与踝程研发，践行每行代科力量！

            </span>
            <div class="teacher_head_pic">
                <ul>
                    <li><img src="image/头像1.png" alt=""></li>
                    <li><img src="image/头像2.png" alt=""></li>
                    <li><img src="image/头像3.png" alt=""></li>
                    <li><img src="image/头像4.png" alt=""></li>
                    <li><img src="image/头像5.png" alt=""></li>
                    <li><img src="image/头像6.png" alt=""></li>
                    <li><img src="image/头像7.png" alt=""></li>
                    <li><img src="image/头像3.png" alt=""></li>
                </ul>
            </div>
            <div class="teacher_introduce_show">
                <div class="full_body_picture"></div>
                <div class="Personal_introduction">
                    <span>陆老师</span>
                    <div class="Personal_introduction_title">
                        <span>专业课</span>
                        <span>第三、第四阶段</span>
                    </div>
                    <div class="Personal_introduction_subject">
                        <span>HTML5大前端教学副总监</span>
                        <span>HTML5大前端教研院成员</span>
                    </div>
                    <div class="detailed_introduction">
                        <span>好配序员明星讲所，负责HTML 5好程序员核心谭控讲授.前去哪儿网高级的其工程师，营主导去哪儿
                            网在线服务特混合应用程序开发，负责望陈明产品的应用与旅广。营任内游分电子政务高机户品经
                            理，主导内宁区在经力公，电淀ROA系统交互设计与前缺开发.府长NodeJS，Reaction，Vue，
                            Angular, Hybrid, RN, Flutter. 微信小程序，移动就在月与还配等课程讲授。曾发布《DOM探索
                            之间，(Awalon探术之旅.)“nodej基础与实覘>。“角基础与实战。“M站开发实
                            战)，大数可税化基中等视乐改程，保受学生好评.
                        </span>
                    </div>
                    <div class="detailed_data_show">
                        <div>
                            <span>授课时长</span>
                            <i>13周</i>
                        </div>
                        <div>
                            <span>带班人数</span>
                            <i>5000+</i>
                        </div>
                        <div>
                            <span>带班薪资</span>
                            <i>12k+&nbsp;&nbsp;18k+</i>
                        </div>
                        <div>
                            <span>学员评分</span>
                            <i>99.6</i>
                        </div>
                    </div>
                    <div class="student_evaluation">
                        <p>学员评价</p>
                        <img src="image/hstudent.png" alt="">
                        <div class="h_student">
                            <span>胡同学</span>
                            <i>HTML5&nbsp;7期</i>
                        </div>
                        <span>千峰大神讲师,诙谐、幽默、认真</span>
                        <div class="more_class">
                            <a href=""><span>更多随堂教程</span></a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 底部地区制作 -->
        <div class="address">
            <div class="address_auto">
                <ul>
                    <li>北京<div></div>
                    </li>
                    <li>深圳<div></div>
                    </li>
                    <li>上海<div></div>
                    </li>
                    <li>广州<div></div>
                    </li>
                    <li>郑州<div></div>
                    </li>
                    <li>大连<div></div>
                    </li>
                    <li>武汉<div></div>
                    </li>
                    <li>成都<div></div>
                    </li>
                    <li>西安<div></div>
                    </li>
                    <li>杭州<div></div>
                    </li>
                    <li>青岛<div></div>
                    </li>
                    <li>重庆<div></div>
                    </li>
                    <li>长沙<div></div>
                    </li>
                    <li>哈尔滨<div></div>
                    </li>
                    <li>南京<div></div>
                    </li>
                    <li>太原<div></div>
                    </li>
                    <li>沈阳<div></div>
                    </li>
                    <li>合肥<div></div>
                    </li>
                </ul>
                <div class="address_auto_detailed">
                    <ul>
                        <li>武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
                        </li>
                        <li> 武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
                        </li>
                        <li> 咨询电话400-811-9990
                        </li>
                        <li> 面授课程：HTML 5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训，全链路UVUE
                        </li>
                        <li> 设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、
                        </li>
                        <li> 统一游戏开发培训、Go语言开发培训、语言开发培训、全栈+服务器集群培训、网络安全培训、网络营销培训、
                        </li>
                        <li>好程序员</li>
                        <li> 认证课程:软考、Adobe认证、pmp认证、红幅rhce认证
                        </li>
                    </ul>
                    <div class="address_auto_wecheat">
                        <ul>
                            <li>
                                <img src="./image/wecheat01.png" alt="">
                               <p> 了解千锋动本</p>
                               <span> 扫扫快速进入</span>
                                </li>
                            <li>
                                <img src="image/wecheat02.png" alt="">
                               <p> 扫码国名提建议</p>
                               <span> 关注干锋教育服务号</span></li>
                            <li>
                                <img src="image/wecheat03.png" alt=""> 
                                <p>千锋移动就页面</p>
                                <span>直达首席执行官信箱</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <ul>
                <li>关于千锋</li>
                <li>联系我们</li>
                <li>企业合作</li>
                <li>招贤纳土</li>
                <li>技术论坛</li>
                <li>报名咨询</li>
            </ul>
        </div>
    </div>
</body>

</html>